<template>
  <div class="index">
    <div class="banner">
      <div class="moduleOne">
        <img class="kuaisu" src="./../../static/image/kuanSu@2x.png" alt="">
        <div class="smallBox">
          <img src="./../../static/image/yiliu@3x.png" alt="">
        </div>
        <div class="realization" style="cursor: pointer;">
          <i class="iconfont icon-right1 iconfont_jt"></i>
          <span @click="register">我要变现</span>
        </div>
        <!-- 移动的球球 -->
        <div class="bgBox">
          <move width="230px" height='230px'
              top="370px" left='270px' :duration='9' 
              :style="{backgroundImage: 'url(' + require('./../assets/1.png') + ')'}"
          ></move>
          <move width="140px" height='140px'
              top="180px" right='150px' :duration='14' 
              :style="{backgroundImage: 'url(' + require('./../assets/3.png') + ')'}"
          ></move>
          <move width="70px" height='70px'
              top="300px" left='80px' :duration='7' 
              :style="{backgroundImage: 'url(' + require('./../assets/3.png') + ')'}"
          ></move>
          <move width="200px" height='200px'
              top="100px" left='100px' :duration='15' 
              :style="{backgroundImage: 'url(' + require('./../assets/4.png') + ')'}"
          ></move>
          <move width="260px" height='260px'
              top="10px" right='130px' :duration='20' 
              :style="{backgroundImage: 'url(' + require('./../assets/5.png') + ')'}"
          ></move>
          <move width="260px" height='260px'
              top="310px" right='120px' :duration='12' 
              :style="{backgroundImage: 'url(' + require('./../assets/7.png') + ')'}"
          ></move>
        </div>
    
      </div>
      <div class="moduleTwo">
        <img class="title" src="./../../static/image/fengfu2x.png" alt="">
        <p class="smallTitle"><img src="./../../static/image/gezhong2x.png" alt=""></p>
        <span class="slideBoxSpan">
          <swiper></swiper>
        </span>
      </div>

      <!-- 有趣的互动场景 -->
      <div class="amusing">
        <amusing></amusing>
      </div>

      <!-- advantage 我们的优势 -->
      <div class="moduleThree">
        <img class="title" src="./../../static/image/my@2x.png" alt="">
        <p class="smallTitle"><img src="./../../static/image/smy@3x.png" alt=""></p>
        <div class="slideBox">
          <my-advantage></my-advantage>
        </div>
      </div>

      <div class="moduleFour">
       <ul class="clearbox">
         <p>正是乐推 让推广如此不同</p>
         <li v-for="(item,index) in linkArr" :key="item.id"  v-on:mouseover="isActive(item)" v-on:mouseout="noAction(item)">
           <img v-show="item.active" :src="item.imgT" :index="index" ref="imgT" alt="">
           <img :src="item.imgF" alt="">
          </li>
       </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Move from "./../components/move.vue";
import Slide from "./../components/slide.vue";
import Swiper from "./../components/Swiper";
import myAdvantage from "./../components/myAdvantage";
import Amusing from "./../components/Amusing";
export default {
  data() {
    return {
      linkArr: [
        {
          imgT: "./../../static/image/阿里云2@2x.png",
          imgF: "./../../static/image/阿里云@2x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/news@2x.jpg",
          imgF: "./../../static/image/logo/newss@2x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO1@2x.png",
          imgF: "./../../static/image/logo/LOGO2@2x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO4@3x.png",
          imgF: "./../../static/image/logo/LOGO5@3x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO9@3x.png",
          imgF: "./../../static/image/logo/LOGO10@3x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO13@3x.png",
          imgF: "./../../static/image/logo/LOGO14@3x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO15@3x.png",
          imgF: "./../../static/image/logo/LOGO16@3x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/tvv@2x.png",
          imgF: "./../../static/image/logo/tv@2x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO19@3x.png",
          imgF: "./../../static/image/logo/LOGO20@3x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO21@3x.png",
          imgF: "./../../static/image/logo/LOGO22@3x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO23@3x.png",
          imgF: "./../../static/image/logo/LOGO24@3x.png",
          active: 1
        },
        {
          imgT: "./../../static/image/logo/LOGO25@3x.png",
          imgF: "./../../static/image/logo/LOGO26@3x.png",
          active: 1
        }
      ],
      active: 0,
      type: 1
    };
  },
  created() {},
  methods: {
    isActive(item) {
      item.active = 0;
    },
    noAction(item) {
      item.active = 1;
    },
    register() {
      window.open("http://www.lertui.com/ad/register.html");
    }
  },
  components: {
    Move,
    Slide,
    Swiper,
    myAdvantage,
    Amusing
  }
};
</script>
<style lang=scss>
.index {
  position: relative;
  .moduleOne {
    position: relative;
    padding-top: 255px;
    text-align: center;
    display: block;
    .kuaisu {
      width: 480px;
      margin-bottom: 20px;
    }
    .smallBox {
      margin: 20px;
      img {
        width: 260px;
      }
    }
    .realization {
      width: 150px;
      height: 45px;
      line-height: 45px;
      background: #fe5411;
      margin: 25px auto;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      .iconfont_jt {
        font-weight: 600;
        font-size: 18px;
        position: relative;
        top: 2px;
        left: -2px;
      }
    }
    .bgBox {
      width: 100%;
      height: 600px;
      position: absolute;
      top: 150px;
      z-index: -1;
      overflow: hidden;
    }
  }
  .moduleTwo {
    width: 100%;
    margin: 370px 0 40px 0;
    padding: 40px 0;
    text-align: center;
    .title {
      width: 400px;
      margin-bottom: 20px;
    }
    .smallTitle {
      margin: 20px;
      img {
        width: 420px;
      }
    }
  }
  .amusing {
    width: 100%;
    /* height: 500px; */
    /* border: 1px solid lawngreen; */
    margin: 60px 0 100px 0;
  }
  .moduleThree {
    img {
      width: 260px;
    }
    width: 100%;
    height: 500px;
    margin: 0 0 150px 0;
    text-align: center;
    .smallTitle {
      margin: 20px 0;
      img {
        width: 320px;
      }
    }
    .slideBox {
      text-align: center;
    }
  }
  .moduleFour {
    width: 100%;
    margin: 0px auto 100px auto;
    p {
      color: #fe5411;
      line-height: 50px;
      text-align: left;
      margin-left: 20px;
    }
    ul {
      width: 85%;
      margin: 0 auto;
      text-align: center;
      font-size: 20px;
      li {
        float: left;
        width: 150px;
        overflow: hidden;
        height: 64px;
        margin: 0px 0px 20px 20px;
        position: relative;
        cursor: pointer;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>

